<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>QQ简易聊天框</title>
        <link rel="stylesheet" href="css/chat.css">
	</head>
	<body>
		<section id="chat">
					<style type="text/css">
						*{
							margin: 0;
							padding: 0;
							line-height: 22px; font-family: "Arial", "微软雅黑";
							}
						#chat{margin: 3px auto 0 auto;
							  width:436px; 
							  border: 1px #999999 solid;
						 }
						.chatBody{
							width: 100%;
						    height: 220px;
						    overflow:auto;
							}
						.chatText{
							border: none;
						    width: 100%;
						    height: 50px;
						  }
						.btn{
							text-align: right;}
						.btn span{
							display: inline-block;
						    padding: 0 10px;
						    height: 25px;
							overflow: hidden;
							color: #ffffff;
							border-radius: 5px; 
							background-color: #069dd5;
							font-size: 12px;
							margin-right: 3px;
							cursor:pointer;
						   }
							.chatBody div:first-of-type{
								float: left;
								width: 38px;
							 }
							.chatBody p{
								float: left;
								font-size: 12px;
								width:370px;
								color: #0000ff;
							   }
							.chatBody div:last-of-type
							{
							float: left;
							width: 370px;
							font-size: 12px;
							  }
							.chatBody section
							{
								clear: both;
								}
							.chatContent{
								background:#efefef;
								border-radius: 5px;
								padding: 3px;
							}
					</style>
		    <div class="chatBody"></div>
		    <div><img src="../img/icon.jpg"/></div>
		    <textarea class="chatText"></textarea>
		    <div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div>
		</section>
	</body>
</html>